<template>
  <div class="box">
    <div class="main">
      <div class="top">
        <img src="@/assets/images/teaching/list-edit.png" alt="" />
      </div>

      <div class="f fw">
        <div class="course-item" v-for="item in socialList">
          <img
            src="@/assets/images/source/images/ls2.png"
            alt=""
            width="272"
            height="190"
          />
          <div class="f14 pl10 pr10 pt20 pb10">
            <div class="mb10 text-center">唐迟 武忠祥 刘亚男</div>
            <div class="course-content tem2">
              【26考研】全科新手规划与备考宝典
            </div>
          </div>
        </div>
<!--        <div class="course-item">-->
<!--          <img-->
<!--            src="@/assets/images/source/images/ls1.png"-->
<!--            alt=""-->
<!--            width="272"-->
<!--            height="190"-->
<!--          />-->
<!--          <div class="f14 pl10 pr10 pt20 pb10">-->
<!--            <div class="mb10 text-center">孙志岗@产品专家</div>-->
<!--            <div class="course-content tem2">-->
<!--              网易AI大模型产品经理「体验满血版DeepSeek，R1模型不限量使用！」-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="course-item">-->
<!--          <img-->
<!--            src="@/assets/images/source/images/ls3.png"-->
<!--            alt=""-->
<!--            width="272"-->
<!--            height="190"-->
<!--          />-->
<!--          <div class="f14 pl10 pr10 pt20 pb10">-->
<!--            <div class="mb10 text-center">杨亮</div>-->
<!--            <div class="course-content tem2">实战速记3500高频词</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="course-item">-->
<!--          <img-->
<!--            src="@/assets/images/source/images/ls4.png"-->
<!--            alt=""-->
<!--            width="272"-->
<!--            height="190"-->
<!--          />-->
<!--          <div class="f14 pl10 pr10 pt20 pb10">-->
<!--            <div class="mb25 text-center">叶梓</div>-->
<!--            <div class="course-content tem2">-->
<!--              【摄影的奥秘】零基础摄影入门公开课（0227班Y）-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="course-item">-->
<!--          <img-->
<!--            src="@/assets/images/source/images/ls2.png"-->
<!--            alt=""-->
<!--            width="272"-->
<!--            height="190"-->
<!--          />-->
<!--          <div class="f14 pl10 pr10 pt20 pb10">-->
<!--            <div class="mb10 text-center">唐迟 武忠祥 刘亚男</div>-->
<!--            <div class="course-content tem2">-->
<!--              【26考研】全科新手规划与备考宝典-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="course-item">-->
<!--          <img-->
<!--            src="@/assets/images/source/images/ls4.png"-->
<!--            alt=""-->
<!--            width="272"-->
<!--            height="190"-->
<!--          />-->
<!--          <div class="f14 pl10 pr10 pt20 pb10">-->
<!--            <div class="mb10 text-center">孙志岗@产品专家</div>-->
<!--            <div class="course-content tem2">-->
<!--              网易AI大模型产品经理「体验满血版DeepSeek，R1模型不限量使用！」-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="course-item">-->
<!--          <img-->
<!--            src="@/assets/images/source/images/ls1.png"-->
<!--            alt=""-->
<!--            width="272"-->
<!--            height="190"-->
<!--          />-->
<!--          <div class="f14 pl10 pr10 pt20 pb10">-->
<!--            <div class="mb10 text-center">杨亮</div>-->
<!--            <div class="course-content tem2">实战速记3500高频词</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="course-item">-->
<!--          <img-->
<!--            src="@/assets/images/source/images/ls3.png"-->
<!--            alt=""-->
<!--            width="272"-->
<!--            height="190"-->
<!--          />-->
<!--          <div class="f14 pl10 pr10 pt20 pb10">-->
<!--            <div class="mb25 text-center">叶梓</div>-->
<!--            <div class="course-content tem2">-->
<!--              【摄影的奥秘】零基础摄影入门公开课（0227班Y）-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </div>

      <div class="f column aie">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changePage"
        />
        <!-- :hide-on-single-page="value" -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getSocialList} from "@/api/socialPractice/index";
import { parseTime} from '@/utils/util'


import { useCounterStore } from "@/store/modules/counter.ts";
import { useRouter } from "vue-router";
const socialList = ref([]);
const counterStore = useCounterStore();
const route = useRouter();
const title =ref("");
const currentPage = ref(1);
const pageSize = ref(15);
const total = ref(0);

// 修改后的加载数据方法
function loadData() {
  try {
    getSocialList({
      title:title.value,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    }).then(res => {
      socialList.value = res.list;
      total.value = res.total;
    })

  } catch (error) {
    console.error("加载数据失败", error);
  }
}
function changeSize(data){
  pageSize.value=data;
  loadData();
};
function changePage(data){
  currentPage.value = data;
  loadData();
}
function toDetail(item){
  route.push({
    path: '/NewsDetails',
    query: {
      id: item.newsId
    }
  })
}
onMounted(() => {
  loadData(); // 初始化加载数据
  //updateHeight();
 // window.addEventListener("resize", updateHeight);
});
onUnmounted(() => {
 // window.removeEventListener("resize", updateHeight);
});



</script>

<style lang="scss" scoped>
.box {
  background: #f5f7fa;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 100px 0 20px;
  .top{
    width: 100%;
    height: 46px;
    margin-bottom: 24px;
    img{
      height: 100%;
    }
  }
  // 内容
  .course-item {
    width: 272px;
    // height: 282px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    color: #6e747a;
    margin-right: 22px;
    margin-bottom: 22px;
    box-shadow: 0 0 10px 3px #e8e8e8;
    &:nth-child(4n) {
      margin-right: 0;
    }
    .course-content {
      line-height: 24px;
      opacity: 0.7;
    }
    &:hover {
      box-shadow: 0 0 5px 2px #f9b7b7;
    }
  }
}
</style>
